<template>
  <div>
    <Header :backApp="true" contentTitle="升学之旅"></Header>
    <div class="study-home-wrapper">
      <scroller>
        <div class="home">
          <div class="wheel-planting swiper-container" id="bannerSwiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide couSlider" v-for="i in bannerList" :key="i.id" @click="gouri(i)">
                <img class="imgs" :src="i.image" alt />
              </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
          </div>
          <div class="goodsBar flex-h">
            <span class="flex1" v-for="(item, index) in goodsList" :key="index" @click="goweb(item.link)">{{ item.name }}</span>
            <!-- <span class="flex1">夏令营</span>
            <span class="flex1">学科体验日</span> -->
          </div>
          <!-- 研学资讯 -->
          <div class="subtitle flex-h" @click="$router.push({ path: 'infoList' })">
            <span class="flex1">研学资讯</span>
            <i></i>
          </div>
          <div class="kuaixunBox">
            <div class="flex-h kuaixun" v-for="i in recommendList" :key="i.id" @click="godetail(i.id)">
              <i></i>
              <b>{{ i.title }}</b>
            </div>
          </div>
          <div class="subtitle flex-h" @click="$router.push({ path: 'actList' })">
            <span class="flex1">研学集锦</span>
            <i></i>
          </div>
          <div class="activity-imgs-box flex-h">
            <div class="img-box swiper-slide" v-for="(i, index) in getActivityData" :key="i.id" v-show="index < 2">
              <div class="img-list" @click="$router.push({ path: i.id + '' })">
                <img :src="i.cover" alt />
                <span>{{ i.title }}</span>
              </div>
            </div>
          </div>
          <!-- 研学资讯 -->
          <div class="subtitle flex-h" @click="$router.push({ path: 'infoList?type=policy' })">
            <span class="flex1">政策介绍</span>
            <i></i>
          </div>
          <div class="kuaixunBox">
            <div class="flex-h kuaixun" v-for="i in policyList" :key="i.id" @click="godetail(i.id, 'policy')">
              <i></i>
              <b>{{ i.title }}</b>
            </div>
          </div>
          <!-- <div class="subtitle flex-h mgr-50">
            <span class="flex1">研学行程</span>
          </div> -->
          <!-- <div class="product-box">
            <div class="product-item" v-for="product in productList" :key="product.product_sku_id" @click="goMallDetial(product.product_sku_id)">
              <div class="list-box">
                <div class="goods-image">
                  <img :src="product.img" />
                </div>
                <div class="goods-text">
                  <div class="good-info-top">
                    <div class="goods-name two-line">{{ product.name }}</div>
                    <div class="type-icon">
                      <b v-show="product.miaosha_info">秒杀</b>
                    </div>
                  </div>
                  <div class="good-info-bottom">
                    <div class="goods-price">
                      <span class="price-icon">¥</span>
                      {{ product.current_price }}
                      <span v-if="product.price > product.current_price" class="origin-price">¥{{ product.price }}</span>
                    </div>
                    <div class="goods-about">
                      <p class="one-line">
                        本服务由
                        <span class="seller">{{ product.seller_name }}</span> 提供
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="foot-banner">
            <img src="~@/static/images/banner_pic_ad.png" alt />
          </div> -->
          <div class="foot-btn">
            <span @click="appCallPhone">咨询热线</span>
          </div>
        </div>
      </scroller>
    </div>
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import Swiper from 'swiper/dist/js/swiper.js'
import Header from '~/components/topHeader'
import headerBack from '~/components/headerBack'
import { productskusList } from '~/api/mall'
import { format } from '~/plugins/filter'
import { getResearchBanner, getRecommendResearchActivity, getRecommendResearchInfo, getRecommendResearchPolicy, getResearchService } from '~/api/identity'
import ls from 'store2'
export default {
  components: {
    Header,
    headerBack,
  },
  data() {
    return {
      productList: [],
      bannerList: [1, 2],
      getActivityData: [1, 2, 3, 4],
      recommendList: [],
      goodsList: [],
      policyList: [],
    }
  },
  creadted() {},
  mounted() {
    this.$visit('SxPracticeHome')
    // this.getAppMsg()
    this.getProductList()
    this.getActivityList()
    this.getBannerList()
    this.getRecommendResearchInfo()
    this.getRecommendResearchPolicy()
    this.getResearchService()
  },
  methods: {
    goweb(uri) {
      window.location.href = uri
    },
    getResearchService() {
      let obj = {
        type: 1,
      }
      getResearchService(obj).then((res) => {
        if (res.code === '0') {
          this.goodsList = res.data
        }
      })
    },
    godetail(id, type) {
      this.$router.push({ path: 'infoDetail?id=' + id + '&type=' + type })
    },
    backToApp() {
      if (this.checkTerminal() === 'ios') {
        window.webkit.messageHandlers.backMessage.postMessage('back')
      } else if (this.checkTerminal() === 'android') {
        ZMParentsJsToAndroid.backMessage('back')
      } else {
      }
    },
    // getAppMsg() {
    //   // let token = "eyJhbGciOiJSUzI1NiJ9.eyJzdWIiOiJhcHAxNzQ1NzE0IiwidXNlcklkIjoiMTc0NTcxNCIsImZyb20iOiJhcHAiLCJuYmYiOjE1Njc2NDY3MzF9.tNLyMBG-kMw65WKeeCDD6do2vhefGRZR9CgPgYWJDMdjATQq1HCPMf_0EMMuVtPmqVUAMHoGFR-xPdUGUQX-aE2I7JCX4prAenxOeXhTGfT7Fn8NG9T3hnw96o5OJKcbKPSMrzumidMH392M1RPIL_z451bqB5sGrpy0_7vpyzY"
    //   if (this.checkTerminal() === 'ios') {
    //     let iOSInfos = window.iOSInfo
    //     if (Object.keys(iOSInfos).length > 0) {
    //       ls.set('tokensyxk', iOSInfos.tokens)
    //     }
    //   } else if (this.checkTerminal() === 'android') {
    //     let data = window.ZMParentsJsToAndroid.getZyMsg()
    //     let androidData = JSON.parse(data)
    //     ls.set('tokensyxk', androidData.tokens)
    //   } else {
    //     //  ls.set("tokensyxk", token);
    //     //do nothing
    //   }
    // },
    checkTerminal() {
      var u = navigator.userAgent
      var chrome = u.match(/Chrome\/([\d.]+)/) || u.match(/CriOS\/([\d.]+)/)
      var isWechat = u.toLowerCase().match(/MicroMessenger/i) == 'micromessenger' || u.match(/_SQ_/i) == '_sq_'
      var isAndroid = u.match(/(Android);?[\s\/]+([\d.]+)?/)
      var isiOS = !chrome && u.match(/(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/)
      if (isWechat) {
        return 'wechat'
      } else if (isiOS) {
        return 'ios'
      } else if (isAndroid) {
        return 'android'
      }
    },
    getCaption(obj) {
      var index = obj.lastIndexOf('=')
      obj = obj.substring(index + 1, obj.length)
      return obj
    },
    getRecommendResearchPolicy() {
      getRecommendResearchPolicy().then((res) => {
        console.log('res: ', res)
        if (res.code === '0') {
          this.policyList = res.data
        }
      })
    },
    goCourseDetail(item) {
      if (this.checkTerminal() == 'ios') {
        window.webkit.messageHandlers.goCourseDetail.postMessage(item)
      } else if (this.checkTerminal() == 'android') {
        ZMParentsJsToAndroid.goCourseDetail(JSON.stringify(item))
      } else {
        // do nothing
      }
    },
    gouri(item) {
      let ure = item.link
      if (ure.indexOf('shengxue://infomationDetail') > -1 || ure.indexOf('shengxue://lessonDetail') > -1) {
        this.goCourseDetail(item)
      } else {
        window.location.href = ure
      }
    },
    getBannerList() {
      getResearchBanner()
        .then((res) => {
          this.bannerList = res.data
          this.$nextTick(() => {
            //  this.activitySwip();
            this.bannerSwip()
          })
        })
        .catch((error) => {})
    },
    bannerSwip() {
      let mySwiper = new Swiper('#bannerSwiper', {
        loop: true,
        autoplay: true,

        autoplay: {
          disableOnInteraction: false,
        },
        pagination: {
          el: '.swiper-pagination',
          bulletElement: 'li',
        },
      })
    },
    activitySwip() {
      let mySwiper = new Swiper('#activitySwiper', {
        // scrollbar: '.swiper-scrollbar',
        // direction: 'vertical',
        slidesPerView: 'auto',
        mousewheelControl: true,
        freeMode: true,
        // roundLengths: true, //防止文字模糊
      })
    },
    getProductList() {
      // this.$loading('open');
      productskusList()
        .then((res) => {
          this.productList = res.data
          // this.$hideLoading();
        })
        .catch((error) => {
          // this.$hideLoading();
        })
    },
    getRecommendResearchInfo() {
      getRecommendResearchInfo()
        .then((res) => {
          console.log('res22222: ', res)
          if (res.code == '0') {
            this.recommendList = res.data
          }
          // this.$hideLoading();
        })
        .catch((error) => {
          // this.$hideLoading();
        })
    },
    getActivityList() {
      getRecommendResearchActivity()
        .then((res) => {
          this.getActivityData = res.data
          this.$nextTick(() => {
            this.activitySwip()
          })
        })
        .catch((error) => {})
    },
    goMallDetial(sku_id) {
      let return_url = window.location.href
      if (this.checkTerminal() === 'ios') {
        let obj = {
          gourl: process.env.mallurl + '/products/' + sku_id + '?from=wechat',
          pay_return_url: return_url,
        }
        window.webkit.messageHandlers.goZyMal.postMessage(obj)
      } else {
        window.location.href = process.env.mallurl + '/products/' + sku_id + '?trace_id=' + sessionStorage.getItem('trace_id') + '&from=wechat'
      }
    },

    appCallPhone() {
      let telephone = '027-88161985'
      var terminal = this.checkTerminal()
      if (terminal === 'ios') {
        window.webkit.messageHandlers.CallTelephone.postMessage(telephone)
      } else if (terminal === 'android') {
        ZMParentsJsToAndroid.CallTelephone(telephone) //eslint-disable-line
      } else if (terminal === 'wechat') {
        window.location.href = 'tel://' + telephone
      } else {
        window.location.href = 'https://app.sx985.com/download'
      }
    },
  },
}
</script>

<style scoped lang="less">
.study-home-wrapper {
  width: 100%;
  height: 100vh;
  margin-top: -0.88rem;
  background: #fff;
}
.home {
  width: 100%;
  height: auto;
  background: #fff;
  padding-top: 0.88rem;
  box-sizing: border-box;
  padding-bottom: 1rem;
  .wheel-planting {
    width: 100%;
    height: 3.2rem;
    box-sizing: border-box;
    .swiper-pagination-bullet {
      width: 0.16rem;
      height: 0.04rem;
      background: rgba(255, 255, 255, 1);
      display: inline-block;
      border-radius: 2px;
    }
    .couSlider {
      width: 100%;
      height: 100%;
      padding: 0.1rem 0.2rem;
      box-sizing: border-box;
      img {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 0.1rem;
        background: url('~@/static/header.png') no-repeat;
        background-size: 100% 100%;
      }
    }
  }
  .goodsBar {
    width: 100%;
    height: auto;
    margin-top: 0.4rem;
    margin-bottom: 0.4rem;
    padding: 0 0.3rem;
    box-sizing: border-box;
    span {
      height: 1.28rem;
      background: rgba(247, 247, 250, 1);
      border-radius: 0.08rem;
      text-align: center;
      line-height: 1.28rem;
      margin-right: 0.2rem;
    }
    span:nth-of-type(3) {
      margin-left: 0;
    }
  }
  .subtitle {
    padding: 0 0.3rem;
    box-sizing: border-box;
    height: 0.8rem;
    span {
      font-size: 0.4rem;
      font-family: PingFangSC;
      font-weight: 600;
      color: rgba(34, 34, 34, 1);
      line-height: 0.8rem;
    }
    i {
      width: 0.6rem;
      height: 0.6rem;
      display: inline-block;
      background: url('~@/static/sprite/icon_sprites_40.png') -1.95rem -1.05rem;
      background-size: 4.5rem 3.6rem;
    }
  }
  .activity-imgs-box {
    width: 100%;
    padding: 0 0.3rem;
    box-sizing: border-box;
    height: 2.8rem;
    overflow: hidden;
    margin-top: 0.2rem;
    flex-wrap: wrap;
    justify-content: space-between;
    .img-box {
      width: 3.2rem;
      height: 2.8rem;
    }
    .img-list {
      width: 3rem;
      height: 2.8rem;
      img {
        display: block;
        width: 3rem;
        height: 2rem;
        border-radius: 0.1rem;
        background: url('~@/static/header.png') no-repeat;
        background-size: 100% 100%;
      }
      span {
        display: block;
        height: 0.6rem;
        font-size: 0.28rem;
        font-family: PingFangSC;
        font-weight: 600;
        color: rgba(34, 34, 34, 1);
        line-height: 0.6rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }

  .activity-info-box {
    width: 100%;
    height: auto;
    padding: 0 0.3rem;
    box-sizing: border-box;
    .study-info {
      width: 100%;
      height: auto;
      padding: 0.2rem 0;
      border-bottom: 1px solid rgba(235, 235, 235, 1);
      .title {
        display: block;
        font-size: 0.3rem;
        font-weight: 500;
        color: rgba(3, 3, 3, 1);
        line-height: 0.4rem;
      }
      .desc {
        margin-top: 0.2rem;
        .left {
          img {
            width: 0.2rem;
            height: 0.2rem;
          }
          i {
            font-size: 0.2rem;
            color: rgba(235, 78, 62, 1);
          }
        }

        .right {
          text-align: right;
          b {
            font-size: 0.24rem;
            color: rgba(28, 28, 29, 1);
          }
          em {
            font-size: 0.24rem;
            color: rgba(187, 187, 187, 1);
            margin-left: 0.1rem;
          }
        }
      }
    }
  }
  .kuaixunBox {
    width: 100%;
    height: auto;
    padding: 0.4rem 0.2rem;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 0.2rem 0px rgba(204, 204, 204, 0.3);
    border-radius: 0.2rem;
    width: 6.9rem;
    margin: 0.2rem auto;
    .kuaixun {
      margin-bottom: 0.5rem;
      i {
        display: inline-block;
        width: 0.1rem;
        height: 0.1rem;
        background: rgba(255, 214, 61, 1);
        border-radius: 50%;
      }
      b {
        font-size: 0.3rem;
        font-weight: 500;
        color: rgba(34, 34, 34, 1);
        line-height: 0.4rem;
        padding-left: 0.1rem;
        box-sizing: border-box;
        width: 6.4rem;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
      }
    }
    .kuaixun:nth-last-of-type(1) {
      margin-bottom: 0;
    }
  }
}
.mgr-50 {
  margin-top: 0.5rem;
}
.product-box {
  padding: 0 0.3rem;
  box-sizing: border-box;
}
.product-item {
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  position: relative;

  .list-box {
    width: 6.9rem;
    display: flex;
    margin-top: 0.4rem;
    font-size: 0.28rem;
    .goods-image {
      height: 2rem;
      width: 2rem;
      img {
        height: 100%;
        width: 100%;
        border-radius: 0.1rem;
      }
    }

    .goods-text {
      padding-left: 0.3rem;
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
      .good-info-top {
        .goods-name {
          width: 100%;
          line-height: 0.4rem;
          font-weight: bold;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .type-icon {
          margin-top: 0.1rem;
          img {
            height: 0.36rem;
            width: 0.36rem;
          }
          b {
            background: linear-gradient(270deg, rgba(253, 45, 37, 1) 0%, rgba(251, 100, 35, 1) 100%);
            border-radius: 0.06rem;
            padding: 0.03rem 0.1rem;
            font-size: 0.24rem;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
            line-height: 0.33rem;
          }
        }
      }

      .good-info-bottom {
        .goods-price {
          font-size: 0.36rem;
          color: #eb4e3e;
          font-weight: 600;
          .price-icon {
            font-size: 0.296rem;
            padding-right: 0.1rem;
          }
          .origin-price {
            text-decoration: line-through;
            color: #c7c7c7;
            font-size: 0.26rem;
          }
        }
        .goods-about {
          font-size: 0.24rem;
          color: #bbbbbb;
          font-weight: 500;
          p {
            margin: 0.05rem 0 0.03rem 0;
            .seller {
              color: #222222;
            }
          }
        }
      }
    }
  }
}
.foot-banner {
  width: 100%;
  height: 3.3rem;
  padding: 0.4rem;
  box-sizing: border-box;
  margin-top: 0.3rem;
  img {
    display: block;
    width: 100%;
    height: 100%;
  }
}
.foot-btn {
  width: 100%;
  height: auto;
  padding: 0 0.6rem;
  box-sizing: border-box;
  margin-top: 0.6rem;
  span {
    display: block;
    width: 100%;
    height: 0.88rem;
    border-radius: 0.45rem;
    opacity: 0.9;
    font-size: 0.3rem;
    font-family: PingFangSC;
    font-weight: 600;
    color: @assistColor;
    line-height: 0.88rem;
    text-align: center;
    border: 1px solid @assistColor;
  }
}
</style>
